<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
      <el-form-item label="输入搜索" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入车辆名称"
          clearable
          style="width: 300px"
        />
      </el-form-item>
      <el-form-item label="作业状态:" prop="status" class="el-form-item">
        <el-select
          v-model="queryParams.status"
          placeholder="请选择状态"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="dict in work_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="当前告警:" prop="status" class="el-form-item">
        <el-select
          v-model="queryParams.alarmStatus"
          placeholder="请选择状态"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="dict in alarm_status"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >查询结果</el-button
        >
      </el-form-item>
    </el-form>
    <el-table ref="tables" v-loading="loading" :data="list">
      <el-table-column label="车辆图片" align="center">
        <template slot-scope="{ row }">
          <el-image
            style="width: 50px; height: 50px"
            :src="formattedHeadIcon(row.imageUrl)"
            fit="fill"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column label="车辆名称" align="center" prop="name" />
      <el-table-column label="车辆号码" align="center" prop="carNumber" />
      <el-table-column label="车辆分类" align="center">
        <template slot-scope="{ row }">
          <div v-if="row.classify == 0">清理车</div>
          <div v-if="row.classify == 1">清运车</div>
        </template>
      </el-table-column>
      <el-table-column label="作业状态" align="center">
        <template slot-scope="{ row }">
          <div v-if="row.status == 0">正常</div>
          <div v-if="row.status == 1">冻结</div>
          <div v-if="row.status == 2">空闲</div>
          <div v-if="row.status == 3">维修</div>
        </template>
      </el-table-column>
      <el-table-column label="当前告警" align="center">
        <template slot-scope="{ row }">
          <div>{{ row.alarm ? row.alarm : "--" }}</div>
        </template>
      </el-table-column>
      <el-table-column
        label="更新时间"
        align="center"
        prop="createTime"
        min-width="90"
      />
      <el-table-column
        label="定位位置"
        align="center"
        prop="locationName"
        min-width="150"
      />
      <el-table-column label="驾驶人" align="center" prop="driver" />
      <el-table-column label="手机号" align="center" prop="driverPhone" />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="handleView(scope.row)"
            >作业情况</el-button
          >
          <el-button size="mini" type="text" @click="carVideo(scope.row)"
            >视频监控</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { carlist } from "@/api/system/car";
import { getLocationName } from "@/utils/map";
const prefix = process.env.VUE_APP_CDN_HOST;
export default {
  name: "Operlog",
  data() {
    return {
      //作业状态
      work_status: [
        { value: "0", label: "正常" },
        { value: "1", label: "冻结" },
        { value: "2", label: "空闲" },
        { value: "3", label: "维修" },
      ],
      //当前告警
      alarm_status: [
        { value: "0", label: "无" },
        { value: "1", label: "超速行驶" },
        { value: "2", label: "违规作业" },
      ],
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: undefined,
      },
    };
  },
  async created() {
    this.loading = false;
    this.getList();
  },
  methods: {
    formattedHeadIcon(icon) {
      return prefix + icon;
    },
    /** 查询登录日志 */
    getList() {
      this.loading = true;
      carlist(this.queryParams).then(async (response) => {
        this.list = response.data.records;
        // 使用 Promise.all 等待所有异步操作完成
        this.list = await Promise.all(
          this.list.map(async (item) => {
            let locationName = "--";
            if (item.carTrajectory && item.carTrajectory.areaLocation) {
              locationName = await getLocationName({
                lng: parseFloat(item.carTrajectory.areaLocation.longitude),
                lat: parseFloat(item.carTrajectory.areaLocation.latitude),
              });
            }
            return {
              ...item,
              locationName: locationName,
            };
          })
        );
        this.total = response.data.total;
        this.loading = false;
      });
    },
    // 修改
    handleView(row) {
      this.$router.push({
        path: "/control/workCar/detail",
        query: { id: row.id },
      });
    },
    //查看视频监控
    carVideo(row) {
      this.$router.push({ path: "/control/carVideo", query: { id: row.id } });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.manage-add-btn {
  float: right;
}

.dialog-footer {
  text-align: center;
}
</style>
